<template>
    <div>
        <!--文章模块-头部-->
        <el-row>
            <el-col :span="2">
                <span style="font-weight: bolder;color:#444"><i class="el-icon-edit-outline"></i>最新教程</span>
            </el-col>
            <el-col :span="1" :offset="20">
                <p class="text-right"><a href="/pCourseList/all">更多</a></p>
            </el-col>
        </el-row>
        <!--文章模块-内容-->
        <el-row>
            <el-col class="top-course-container" :span="6" v-for="(c,index) in courseList" :key="index">
                <div class="top-course">
                    <dl class="item">
                        <dt><a :href="'/pCourseDetails?catalog=all&aid='+c.aid+'&cid='+c.cid"><img :src="c.logo"></a></dt>
                        <dd>
                            {{c.cname}}<br>
                            <p class="item-footer"><span v-if="c.type==='免费'" style="color:#0bbe0b">{{c.type}}</span><span v-if="c.type==='收费'" style="color:darkorange">{{c.type}}</span><span v-show="c.top==1" style="color:orangered">[置顶]</span> <span class="pull-right">关注度<span class="num">{{c.browseNum}}</span></span></p>
                        </dd>
                    </dl>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    /*
    //引入ElementUI的类库
    import Vue from 'vue';
    //引入所需的组件
    import {Row, Col} from 'element-ui';
    //引入组件的样式表
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(Row);
    Vue.use(Col);
    */

    import request from "@/util/request";
    export default {
        name: "MyTopicCourse",
        data() {
            return {
                courseList: []

            }
        },
        mounted() {
            this.initTopCourseList();
        },
        methods:{
            initTopCourseList(){
                request.get('/blog/course/top/8').then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.courseList = resp.data.data;
                        //console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }

    }
</script>

<style scoped>

    .text-right a {
        color: #666;
        text-decoration: none;
        font-size: small;
    }

    .top-course {
        margin: 10px;
        padding: 0px;
        border: 1px solid #DDDDDD;
    }

    .item img {
        width: 100%;
    }

    .item {
        background: #fff;
        margin: 0px;
    }

    .item dd {
        position: relative;
        left: -20px;
        height: 50px;
        background: #FFF;
        color: #336699;
        font-size: small;
        font-weight: bolder;
    }

    .item:hover {
        transform: scale(1.00, 1.00);
        box-shadow: 0 5px 12px #DDDDDD;
        cursor: pointer;
    }
    .item dt {
        overflow: hidden;
    }
    .item img {
        transition: all 1.1s;
    }

    .item img:hover {
        transform: scale(1.05);
    }
    .item-footer{
        font-size: x-small;
        font-weight: normal;
        text-align: end;
        color:#999;
    }

</style>